<script setup lang="ts">
import {defineAsyncComponent, onMounted, reactive, ref} from 'vue';
import {useAgentApi} from '/@/api/judicial/agent';

// 引入组件
const UserDialog = defineAsyncComponent(() => import('/@/views/judicial/agent/agent_dialog.vue'));
const SoftwareDialog = defineAsyncComponent(() => import('/@/views/judicial/agent/agent_software.vue'));
const RechargeDialog = defineAsyncComponent(() => import('/@/views/judicial/agent/agent_recharge.vue'));

// 定义变量内容
const userDialogRef = ref();
const softwareDialogRef = ref();
const rechargeDialogRef = ref();
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			page: 1,
			page_size: 15,
			keywords: '',
			create_time: '',
			sort_data_total: '',
			sort_created_at: '',
		},
	},
});

// 重置
const onResetSubmit = () => {
	state.tableData.param = {
		page: 1,
		page_size: 15,
		keywords: '',
		create_time: '',
		sort_data_total: '',
		sort_created_at: '',
	};
	onSearchSubmit();
}

const onOpenDetail = (type, row) => {
	userDialogRef.value.openDialog(type, row);
};
const onOpenSoftware = (type, row) => {
	softwareDialogRef.value.openDialog(type, row);
}
const onOpenRecharge = (type, row) => {
	rechargeDialogRef.value.openDialog(type, row);
}

// 搜索
const onSearchSubmit = async () => {
	await getTableData();
};

// 排序
const onTableSortChange = (val: any) => {
	if (val.prop === 'data_total') {
		state.tableData.param.sort_data_total = val.order === 'descending' ? 'desc' : 'asc';
	}
	if (val.prop === 'created_at') {
		state.tableData.param.sort_created_at = val.order === 'descending' ? 'desc' : 'asc';
	}
	onSearchSubmit();
};

// 初始化表格数据
const getTableData = async () => {
	state.tableData.loading = true;

	await useAgentApi().getAgentListData(state.tableData.param).then((res) => {
		state.tableData.data = res.data.list;
		state.tableData.total = res.data.total;
	});
	setTimeout(() => {
		state.tableData.loading = false;
	}, 100);
};

// 分页改变
const onHandleSizeChange = (val: any) => {
	state.tableData.param.page_size = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: any) => {
	state.tableData.param.page = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">

			<div class="system-user-search mb15">
				<el-row :gutter="35">

					<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5" class="mb10">
						<el-form-item label="">
							<el-input size="small" placeholder="关键词：账号，昵称，主体" v-model="state.tableData.param.keywords" class="w100" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5">
						<el-form-item label="">
							<el-date-picker
								v-model="state.tableData.param.create_time"
								type="datetimerange"
								start-placeholder="注册开始"
								end-placeholder="注册结束"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								size="small"
								clearable
							/>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
						<el-button size="small" type="primary" class="ml10 search-button" @click="onSearchSubmit()">
							<el-icon><ele-Search/></el-icon>
							查询
						</el-button>
						<el-button size="small" class="ml10" @click="onResetSubmit()">
							<el-icon><ele-SwitchButton/></el-icon>
							重置
						</el-button>
						<el-button size="small" type="success" class="ml10" @click="onOpenDetail('add', null)">
							<el-icon><ele-Plus/></el-icon>
							添加
						</el-button>
					</el-col>

				</el-row>
			</div>

			<el-table
				:data="state.tableData.data"
				v-loading="state.tableData.loading"
				border size="small"
				:header-cell-style="{backgroundColor: '#f8f8f8', color: '#010101'}"
				highlight-current-row
				@sort-change="onTableSortChange"
				style="width: 100%"
			>
				<el-table-column label="代理名称" prop="nickname" show-overflow-tooltip min-width="170" align="center"></el-table-column>
				<el-table-column label="代理头像" prop="avatar" show-overflow-tooltip min-width="80" align="center">
					<template v-slot="scope">
						<el-image
							style="width: 50px; height: 50px; border-radius: 50%"
							:src="scope.row.avatar"
							:preview-src-list="[scope.row.avatar]"
							:preview-teleported="true"
							:hide-on-click-modal="true"
							fit="cover"
						/>
					</template>
				</el-table-column>
				<el-table-column label="代理账号" prop="username" show-overflow-tooltip min-width="100" align="center"></el-table-column>
				<el-table-column label="对应主体" prop="software" show-overflow-tooltip min-width="130" align="center">
					<template v-slot="scope">
						<el-text>{{ scope.row.software.name }}</el-text>
					</template>
				</el-table-column>
				<el-table-column label="数据总条数" prop="data_total" show-overflow-tooltip min-width="80" align="center" sortable>
					<template v-slot="scope">
						<el-text type="primary">{{ scope.row.data_total }}</el-text> 条
					</template>
				</el-table-column>
				<el-table-column label="注册时间" prop="created_at" show-overflow-tooltip min-width="140" align="center" sortable></el-table-column>
				<el-table-column label="产品封面" prop="image_url" show-overflow-tooltip min-width="100" align="center">
					<template v-slot="scope">
						<el-image
							style="width: 50px; height: 50px; border-radius: 50%"
							:src="scope.row.product.image_url"
							:preview-src-list="[scope.row.product.image_url]"
							:preview-teleported="true"
							:hide-on-click-modal="true"
							fit="cover"
						/>
					</template>
				</el-table-column>
				<el-table-column label="产品名称" prop="name" show-overflow-tooltip min-width="140" align="center">
					<template v-slot="scope">
						<el-text>{{ scope.row.product.name }}</el-text>
					</template>
				</el-table-column>
				<el-table-column label="产品价格" prop="price" show-overflow-tooltip min-width="90" align="center">
					<template v-slot="scope">
						<el-text type="primary">{{ scope.row.product.price }}</el-text> 元
					</template>
				</el-table-column>

				<el-table-column label="操作" min-width="240" align="center" header-align="center" fixed="right">
					<template #default="scope">
						<el-row style="display: flex; align-items: center; justify-content: space-around">
							<el-button plain Primary color="#626aef" size="small" @click="onOpenDetail('edit', scope.row)">操作详情</el-button>
							<el-button plain type="warning" size="small" @click="onOpenSoftware('主体信息', scope.row.software)">主体信息</el-button>
							<el-button plain type="danger" size="small" @click="onOpenRecharge('充值数据', scope.row)">充 值</el-button>
						</el-row>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[15, 30, 50]"
				v-model:current-page="state.tableData.param.page"
				background
				v-model:page-size="state.tableData.param.page_size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</el-card>
		<UserDialog ref="userDialogRef" @refresh="getTableData()"/>
		<SoftwareDialog ref="softwareDialogRef" @refresh="getTableData()"/>
		<RechargeDialog ref="rechargeDialogRef" @refresh="getTableData()"/>
	</div>
</template>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}
</style>